<!-- IP漂移轨迹 -->
<template>
	<div class="app-container">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="确认IP" name="confirm">
				<!-- 搜索表单 -->
				<yd-form :options="conFormOptions" :model="queryConfirmParams" :btns="conFormBtns"></yd-form>
				<!-- 数据列表 -->
				<YdTable
					:formData="queryConfirmParams"
					:tableConfig="tableConfirmConfig"
					:tableData="tableConfirmData"
					@sizeChangeHandler="getConfirmList"
					@currentChangeHandler="getConfirmList"
					@sortChangeHandler="getConfirmList"
				>
				</YdTable>
			</el-tab-pane>
			<el-tab-pane label="移除IP" name="remove">
				<!-- 搜索表单 -->
				<yd-form :options="remFormOptions" :model="queryRemoveParams" :btns="remFormBtns"></yd-form>
				<!-- 数据列表 -->
				<YdTable
					:formData="queryRemoveParams"
					:tableConfig="tableRemoveConfig"
					:tableData="tableRemoveData"
					@sizeChangeHandler="getRemoveList"
					@currentChangeHandler="getRemoveList"
					@sortChangeHandler="getRemoveList"
				>
				</YdTable>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup name="IpDrift" lang="ts">
import { getConfirm, getRemove } from '@/api/management/segmentManage/ipDrift';
import { formatDate } from '@/utils/common';
import { Pagination } from 'swiper';
import { ref, reactive, onMounted } from 'vue';

const conFormOptions = reactive<FormOptionType>([
	{
		type: 'input',
		label: '系统名称',
		prop: 'systemName',
		attrs: {
			clearable: true,
		},
	},
	{
		type: 'input',
		label: '组件IP',
		prop: 'componentIp',
		attrs: {
			clearable: true,
		},
	},
	{
		type: 'input',
		label: '原网端名称',
		prop: 'oldSegmentName',
		attrs: {
			clearable: true,
		},
	},
	{
		type: 'input',
		label: '新网端名称',
		prop: 'newSegmentName',
		attrs: {
			clearable: true,
		},
	},
	{
		type: 'date-picker',
		label: '日期范围',
		prop: 'dateRange',
		span: 8,
		dateType: 'daterange',
	},
]);
const conFormBtns = reactive<BtnType[]>([
	{
		type: 'primary',
		text: '查询',
		handler: handlerConfirmQuery,
	},
]);
const remFormOptions = reactive<FormOptionType>([
	{
		type: 'input',
		label: '系统名称',
		prop: 'systemName',
		attrs: {
			clearable: true,
		},
	},
	{
		type: 'input',
		label: '组件IP',
		prop: 'componentIp',
		attrs: {
			clearable: true,
		},
	},
	{
		type: 'input',
		label: '网端名称',
		prop: 'segmentName',
		attrs: {
			clearable: true,
		},
	},
	{
		type: 'date-picker',
		label: '日期范围',
		prop: 'dateRange',
		span: 8,
		dateType: 'daterange',
	},
]);
const remFormBtns = reactive<BtnType[]>([
	{
		type: 'primary',
		text: '查询',
		handler: handlerRemoveQuery,
	},
]);
const activeName = ref('confirm');
// 确认IP列表配置
let tableConfirmConfig = reactive({
	url: getConfirm,
	columns: [
		{
			label: '系统名称',
			prop: 'systemName',
			showOverFlowToolTip: true,
		},
		{
			label: '组件IP',
			prop: 'componentIp',
			showOverFlowToolTip: true,
		},
		{
			label: '组件端口',
			prop: 'componentPort',
			showOverFlowToolTip: true,
		},
		{
			label: '原网端名称',
			prop: 'oldSegmentName',
			showOverFlowToolTip: true,
			formatter(row: anyObj, value: ApiVal) {
				if (value === 'null') {
					return '';
				}
				return value;
			},
		},
		{
			label: '新网端名称',
			prop: 'newSegmentName',
			showOverFlowToolTip: true,
		},
		{
			label: '确认时间',
			prop: 'createTime',
			showOverFlowToolTip: true,
			formatter(row: anyObj, val: ApiVal) {
				return formatDate(val as string);
			},
		},
	],
	// 工具栏
	toolBar: [],
	// 开启复选框
	enableSelection: false,
	// 开启分页
	pagination: {
		pageNum: 1,
		pageSize: 10,
		total: 0,
	},
	// 加载层
	loading: true,
});
// 移除IP列表配置
let tableRemoveConfig = reactive({
	url: getRemove,
	columns: [
		{
			label: '系统名称',
			prop: 'systemName',
			showOverFlowToolTip: true,
		},
		{
			label: '组件IP',
			prop: 'componentIp',
			showOverFlowToolTip: true,
		},
		{
			label: '组件端口',
			prop: 'componentPort',
			showOverFlowToolTip: true,
		},
		{
			label: '所属网端',
			prop: 'segmentName',
			showOverFlowToolTip: true,
		},
		{
			label: '移除时间',
			prop: 'createTime',
			showOverFlowToolTip: true,
			formatter(row: anyObj, val: ApiVal) {
				return formatDate(val as string);
			},
		},
	],
	// 工具栏
	toolBar: [],
	// 开启复选框
	enableSelection: false,
	// 开启分页
	pagination: {
		pageNum: 1,
		pageSize: 10,
		total: 0,
	},
	// 加载层
	loading: true,
});
// 确认IP列表数据
let tableConfirmData = ref([]);
// 移除IP列表数据
let tableRemoveData = ref([]);
//确认IP查询参数
let queryConfirmParams = reactive<anyObj>({});
//移除IP查询参数
let queryRemoveParams = reactive<anyObj>({});

onMounted(() => {
	getConfirmList();
});

/** 查询参数列表 */
function getConfirmList() {
	tableConfirmConfig.loading = true;
	getConfirm(queryConfirmParams).then((response: ApiResponse) => {
		tableConfirmData.value = response.data.records;
		tableConfirmConfig.pagination.total = response.data.total;
		tableConfirmConfig.loading = false;
	});
}
/** 查询参数列表 */
function getRemoveList() {
	tableRemoveConfig.loading = true;
	getRemove(queryRemoveParams).then((response: ApiResponse) => {
		tableRemoveData.value = response.data.records;
		tableRemoveConfig.pagination.total = response.data.total;
		tableRemoveConfig.loading = false;
	});
}
/** 确认IP搜索按钮操作 */
function handlerConfirmQuery() {
	tableConfirmConfig.pagination.pageNum = 1;
	getConfirmList();
}
/** 移除IP搜索按钮操作 */
function handlerRemoveQuery() {
	tableRemoveConfig.pagination.pageNum = 1;
	getRemoveList();
}
/*tab 切换*/
function handleClick(tab: anyObj) {
	if (tab.name === 'confirm') {
		getConfirmList();
	} else {
		getRemoveList();
	}
}
</script>
